<%@ page contentType="text/html;charset=UTF-8" %>
<jsp:include page="/common/head.jsp"></jsp:include>
<title>jquery效果</title>
<script type="text/javascript">
    //展开隐藏层
    $(document).ready(function () {
        $(".part").click(function () {
            var hideP = $(this).next();
            if (hideP.css('display') == 'none') {
                hideP.show();
                $(this).hide();
            }
            else {
                hideP.hide();
                $(this).show();
            }
        });
        $(".all").click(function () {
            var hideP = $(this).prev();
            if (hideP.css('display') == 'none') {
                hideP.show();
                $(this).hide();
            }
            else {
                hideP.hide();
                $(this).show();
            }
        });
    });
</script>
</head>
<body>
<!--循环出来的div-->
<div class='classA'>
    <p class="part">内容1</p>
    <p class="all" style="display:none">内容1，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
<div class='classA'>
    <p class="part">内容2</p>
    <p class="all" style="display:none">内容2，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
<div class='classA'>
    <p class="part">内容3</p>
    <p class="all" style="display:none">内容3，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
</body>
</html>
